<!doctype html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link href="../../css/mui.min.css" rel="stylesheet" />
		<link rel="stylesheet" type="text/css" href="../../css/Taskdetails/Taskdetails.css" />
		<link rel="stylesheet" href="../../css/vCloak.css" />
	</head>

	<body>

		<header class="mui-bar mui-bar-nav">
			<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
			<h1 class="mui-title">任务详情</h1>
		</header>

		<div id="pullrefresh" class="mui-content mui-scroll-wrapper" :bookId="data.bookId" :bookUid="data.bookUid">
			<div class="mui-scroll" style="display:none;">
				<div class="end" v-if="data.hasBreakThrough">
					<img src="../../imges/Group 122492.png" />
				</div>
				<div id="slider" class="mui-slider">
					<div class="mui-slider-group mui-slider-loop">
						<div class="mui-slider-item mui-slider-item-duplicate img">
							<a href="#">
								<img :src="data.bookPic" data-preview-src="" :data-preview-group="-1" />
							</a>
						</div>
					</div>
				</div>
				<div class="slide">
					<div class="content">
						<div class="header">

							<div class="title">
								<div class="title_name" v-cloak>{{data.bookName}}</div>

								<div class="title_read" v-if="!data.hasBreakThrough">
									<div class="titlezi" v-cloak>{{data.correctRate}}%</div>
									<div class="titlezi_b">已完成</div>
								</div>

								<div class="title_read" v-if="data.hasBreakThrough">
									<div class="titlezi" style="color: #21B0FD;" v-cloak>{{data.correctRate}}%</div>
									<div class="titlezi_b">闯关正确率</div>
								</div>
								<div class="title_read" style="margin-right:16px;" v-if="data.hasBreakThrough">
									<div class="titlezi" v-cloak>{{data.readNoteCount }}</div>
									<div class="titlezi_b">读书笔记</div>
								</div>

							</div>
							<div>
								<div class="author">
									<div class="zi_a" v-cloak>
										作者：{{data.author}}
									</div>
									<div class="zi_b" v-cloak>
										出版社：{{data.press}}
									</div>
								</div>

								<div class="price">
									<button type="button" class="mui-btn mui-btn-warning btunoe">图书详情</button>
									<button type="button" class="mui-btn mui-btn-primary btunow" v-show="!data.hasComplete">阅读打卡</button>
									<button type="button" class="mui-btn truebtunow" v-if="data.hasComplete">已打卡</button>
								</div>
							</div>
						</div>
					</div>
				</div>

				<!--条-->

				<div class="passbutton" v-show="data.hasBreakThrough ">
					<div class="passbutton_img">
						<img src="../../imges/Group 10492.png" />
					</div>
					<div class="break">查看闯关</div>
				</div>

				<div class="contenta_conte" id="aa">
					<div class="contenta strip">
						<div class="strip_str">阅读笔记（<span class="wen" v-cloak>{{shu}}</span>）</div>
					</div>

					<!--分开-->
					<div class="contenta" v-for="(commen,index) in commen" :studentId="commen.studentId">
						<div class="contenta_a">
							<div class="content_img"><img :src="commen.avatar">

							</div>
							<div class="contenta_contenta">
								<span style="color: #333333;" v-cloak>{{commen.studentName }}</span>
								<span class="wufan" v-if="commen.likeCount != 0" v-cloak>{{commen.likeCount}}分</span>
								<div class="time" v-cloak>
									{{commen.writeDate }}
								</div>
								<div class="cotenta_Publish" v-cloak>{{commen.noteContent }}</div>
								
								<div class="contenta_img" v-if="commen.multiplePictureList != ''" v-for="item in commen.multiplePictureList">
									<img src="../../imges/jpimageshomeerrorimage.png" v-lazy="item" data-preview-src="" :data-preview-group="index">
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
			<div class="operation">
				<div class="purchase" v-if="data.hasComplete && !data.hasBreakThrough"><button type="button" class="mui-btn mui-btn-primary through">答题闯关</button></div>
				<div class="seepurchase" v-else-if="data.hasBreakThrough"><button type="button" class="mui-btn mui-btn-primary through">闯关详情</button></div>
				<div class="bookshelf" id="note"><button type="button" class="mui-btn mui-btn-outlined">阅读分享</button></div>
			</div>
		</div>
		<!--<a href="../reading/TeacherProgram.html"></a>-->
		<script src="../../js/mui.min.js"></script>
		<script src="../../js/libs/mui.zoom.js"></script>
		<script src="../../js/libs/mui.previewimage.js"></script>
		<script src="../../js/libs/zepto_1.1.3.js"></script>
		<script src="../../js/libs/vue.js"></script>
		<script src="../../js/libs/vue-lazyload.js"></script>
		<script src="../../js/common/common.js"></script>
		<script>
			mui.init({
				pullRefresh: {
					container: '#pullrefresh',
					up: {
						contentrefresh: '正在加载...',
						callback: pullupRefresh
					}
				}
			});
			var bookshelf = new Vue({
				el: '.mui-content',
				data: {
					commen: [],
					data: [],
					imgurl: '',
					cls: [],
					shu: ''
				},
				updated: function() {

				}
			})
			
			 Vue.use(VueLazyload, {
	             preLoad: 1.3,
	             error: '../../imges/jpimageshomeerrorimage.png',
	             loading: '../../imges/jpimageshomeerrorimage.png'
                      });

			var temp = 1
			mui.plusReady(function() {
				var self = plus.webview.currentWebview();
				var obj = self.parameter;
				//阅读打卡
				$(document).on("tap", '.btunow', function() {
					var obj = {}
					obj.bookuid = $("#pullrefresh").attr("uid")
					obj.planuid = $("#pullrefresh").attr("planuid")
					obj.source = $("#pullrefresh").attr("source")
					common.open('../reading/Chapternumber.html','Chapternumber.html', obj)
				})
				//答题闯关
				$(document).on("tap", ".purchase", function() {
					common.open('../Passthrough/Passreminder.html','../Passthrough/Passreminder.html', $("#pullrefresh").attr("uid"))
				})
				//阅读笔记
				$(document).on("tap", "#note", function() {

					common.open('../reading/note.html', 'note.html', $("#pullrefresh").attr("uid"))
				})
				//图书详情
				$(document).on("tap", ".btunoe", function() {
					common.open('../bookdetails/details.html','../bookdetails/details.html', $("#pullrefresh").attr("uid"))
				})
				//查看闯关
				$(document).on("tap", ".passbutton", function() {
					common.open('../Passthrough/View_results.html', '../Passthrough/View_results.html', $("#pullrefresh").attr("uid"))
				})
				//查看闯关
				$(document).on("tap", ".seepurchase", function() {
					common.open('../Passthrough/View_results.html', '../Passthrough/View_results.html', $("#pullrefresh").attr("uid"))
				})

				window.addEventListener("qianguan", function() {
					bookshelf.data = []
					dataBooks()
				})

				window.addEventListener("view", function() {
					bookshelf.data = []
					dataBooks()
				})

				window.addEventListener('shuaxin', function(e) { //执行刷新
					temp = 1
					bookshelf.data = []
					bookshelf.commen = []
					bookshelf.shu = ""
					upLoad()
					dataBooks()
				});

				mui.previewImage();
				dataBooks()

				function dataBooks() {
					$("#pullrefresh").attr("planuid", obj.planuid)
					$("#pullrefresh").attr("uid", obj.bookuid)
					$("#pullrefresh").attr("source", obj.source)
					mui('.mui-slider').slider().setStopped(true)
					common.ajax('student/queryPlanTask', {
						uid: common.uid,
						token: common.token,
						bookUid: obj.bookuid
					}, function(data) {
						if(data.code == 200) {
							bookshelf.data = data.data
						} else {
							mui.toast(data.message)
						}
					}, 'get')
				}
				upLoad()

				function upLoad() {
					if(mui.os.plus) {
						setTimeout(function() {
							mui('#pullrefresh').pullRefresh().pullupLoading();
						}, 300);
					} else {
						mui.ready(function() {
							mui('#pullrefresh').pullRefresh().pullupLoading();
						});
					}
				}
			})

			mui.back = function() {
				plus.webview.close("Chapternumber.html", "slide-out-right")
				plus.webview.close("note.html", "slide-out-right")
				plus.webview.close("../Taskdetails/Taskdetails.html", "slide-out-right")
			}
			/**
			 * 上拉加载具体业务实现
			 */
			function pullupRefresh() {
				console.log(temp)
				common.ajax("student/note/queryReadNote", {
						uid: common.uid,
						token: common.token,
						bookUid: $("#pullrefresh").attr("uid"),
						page: temp++,
						pageSize: 100
					},
					function(data) {
						$(".mui-scroll").show()
						if(data.code == 200) {
							if(!data.data.hasNextPage) {
								mui('#pullrefresh').pullRefresh().endPullupToRefresh(true);
							} else {
								mui('#pullrefresh').pullRefresh().endPullupToRefresh();
							}
							for(var i = 0; i < data.data.list.length; i++) {
								bookshelf.commen.push(data.data.list[i])
							}
							bookshelf.shu = data.data.list.length
						} else {
							mui.toast(data.message)
						}
					}, "get")
			}
		</script>
	</body>

</html>